{% extends "base_site.html" %} 
{% comment %}{% include "detail.html" %}{% endcomment %}
{% block title %}
<title>VM Monitoring</title>
{% endblock %} 
{% comment %}
<ul>
    <li>Total Capacity: {{ vm_info_dict.total_disk_capacity }}</li>
    <li>Total VMs: {{ vm_info_dict.total_vm_number }}</li>
</ul>
{% endcomment %} 

<div class="container theme-showcase">
    {% block common_content %}
    {% endblock %} 
    {% block main_content %}
    <div id="vm_list" class="container-fluid" style="diskplay: block">
        <div class="container">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-left big-font">{{ vm_sum_info.total_vm_number }}<small> Virtual Appliances</small></div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-left big-font">{{ vm_sum_info.total_datastore_capacity }}<small> Capacity</small></div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-left big-font">{{ vm_sum_info.total_provision_datastore_capacity}}<small> Provisioned</small></div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-left big-font">{{ vm_sum_info.total_left_datastore_capacity}}<small> Free</small></div>
        </div>
        <div id="vm_action"> 
            <a type="button" class="btn btn-large navbar-btn btn-primary" href="/vsphere/deploy" methods="get">Deploy</a>
            <button type="button" name="delete_vm" class="btn btn-large navbar-btn btn-primary">Delete</button>
            <button type="button" name="poweron_vm" class="btn btn-large navbar-btn btn-primary">Power On</button>
            <button type="button" name="poweroff_vm" class="btn btn-large navbar-btn btn-primary">Power Off</button>
        </div>

        <table class="table table-hover table-striped">
            <thead>
                <tr style="background-color: #E8E8E8">
                    <th><input type="checkbox" name="" value=""></th>
                    <th>Name</th>
                    <th>IP</th>
                    <th>Hostname</th>
                    <th>Power State</th>
                </tr>
            </thead>
            <tbody>
                {% for item in vm_info %}
                <tr>
                    <td><input type="checkbox" name="" value="{{item.uuid}}"></td>
                    <td><a href="vsphere/detail/{{item.uuid}}">{{item.name}}</a></td>
                    <td>{{item.ip}}</td>
                    <td>{{item.hostname}}</td>
                    <td>{{item.state}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>        
    </div>
    {% endblock %}
    {% block detail_content %}
    {% comment %}{% include "detail.html" %}{% endcomment %}
    {% endblock %}
</div>
